<template>
  <div>
    <div
      style="
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        background-color: transparent;
      "
    >
      <img
        src="../assets/logo.png"
        alt="Logo"
        style="
          width: 25px;
          height: 25px;
          margin-right: 5px;
          margin-left: 20px;
          margin-top: 10px;
          margin-bottom: 10px;
        "
      />
      <span
        style="
          font-size: 20px;
          color: chocolate;
          font-family: 'Comic Sans MS', cursive;
          margin-top: 5px;
        "
        >慧翼童航</span
      >
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img
          src="../assets/慧翼童航.jpg"
          alt="慧翼童航"
          width="200"
          height="200"
      /></van-swipe-item>
      <van-swipe-item>
        <img
          src="../assets/慧翼童航.jpg"
          alt="慧翼童航"
          width="200"
          height="200"
      /></van-swipe-item>
    </van-swipe>

    <van-swipe class="class-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item @click="navigateTo('/study')">
        <img src="../assets/开课啦.png" alt="慧翼童航" width="200" height="200"
      /></van-swipe-item>
    </van-swipe>
  </div>
</template>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  margin-top: 30px;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.class-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* 根据需要调整 */
}

.logo {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  margin-left: 20px;
}

.title {
  font-size: 20px;
  color: chocolate;
}
</style>

<script>
import "vant/lib/index.css";
import router from "@/router"; // 假设您的路由实例在@/router中
import { Swipe, SwipeItem } from "vant";

export default {
  name: "HomeView",
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
  },
  methods: {
    navigateTo(path) {
      // 使用Vue Router进行导航
      router.push(path);
    },
  },
};
</script>
